import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Table, Card, Form, DatePicker, Row, Button, Col, message, Input } from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';

import styles from './style.less';
import { solo } from '../../../common/solo';
const { RangePicker } = DatePicker;
const ButtonGroup = Button.Group;

@connect(({ apply, risk }) => ({
  apply,
  risk,
}))
@Form.create()
export default class PrePayList extends PureComponent {
  state = {
    beginTime: null,
    endTime: null,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'risk/getCustomerBalance' }); //加载客户余额
    dispatch({
      type: 'apply/getPrePayList',
      payload: {
        offset: 0,
        limit: 10,
      },
    });
  }

  tableColumns = [
    { title: '订单号', dataIndex: 'id', key: 'id' },
    { title: '机构名称', dataIndex: 'institutionName', key: 'institutionName' },
    { title: '交易金额', dataIndex: 'tradeMoney', key: 'tradeMoney' },
    { title: '交易内容', dataIndex: 'name', key: 'name' },
    { title: '姓名', dataIndex: 'queryName', key: 'queryName' },
    { title: '手机号', dataIndex: 'queryMobile', key: 'queryMobile' },
    { title: '商户名称', dataIndex: 'secondCompany', key: 'secondCompany' },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
  ];

  handleStandardTableChange = e => {
    this.props.dispatch({
      type: 'apply/getPrePayList',
      payload: {
        offset: (e.current - 1) * e.pageSize,
        limit: e.pageSize,
        beginTime: this.state.beginTime,
        endTime: this.state.endTime,
      },
    });
  };

  handleQueryTime = (value, dateString) => {
    this.setState({
      beginTime: dateString[0],
      endTime: dateString[1],
    });
  };

  handleSearch = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'apply/getPrePayList',
      payload: {
        beginTime: this.state.beginTime,
        endTime: this.state.endTime,
      },
    });
  };

  render() {
    const { apply: { prePayList, applyLoading, prePayPage } } = this.props;
    const { risk: { customerBalance } } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 18,
      },
    };
    let token = sessionStorage.getItem('token');
    const money = customerBalance && customerBalance.money;

    const pageHeaderContent = <div style={{ fontSize: '20px' }}>预存费用余额：{money}</div>;

    return (
      <PageHeaderLayout content={pageHeaderContent}>
        <Card>
          <Form onSubmit={this.handleSearch}>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <Form.Item label="查询时间" {...formItemLayout}>
                  {getFieldDecorator('createTime', {})(
                    <RangePicker
                      size="default"
                      onChange={this.handleQueryTime}
                      style={{ width: '100%' }}
                    />
                  )}
                </Form.Item>
              </Col>
              <Col md={8} sm={24} />
              <Col md={8} sm={24}>
                <div style={{ textAlign: 'right' }}>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                  <Button type="primary" style={{ marginLeft: '16px' }}>
                    <a
                      target="_blank"
                      href={`${solo.baseUrl}prepay/prepayExport/${token}/${this.state.beginTime}/${
                        this.state.endTime
                      }`}
                      title="Excel下载"
                    >
                      导出
                    </a>
                  </Button>
                </div>
              </Col>
            </Row>
          </Form>

          <Table
            pagination={prePayPage}
            loading={applyLoading}
            rowKey="id"
            dataSource={prePayList}
            columns={this.tableColumns}
            onChange={this.handleStandardTableChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
